<template>
	<view class="pages">
		
		<view class="box"  v-for="(items,is) in list" :key="is">
			<view  class="title" style="color: #277EEF;">
				{{items.staffName}}
			</view>
			<view class="" v-for="(item,i) in items.childs" :key="i">
				<view  class="title">
					{{item.serviceParentName}}
				</view>
				<view class="citylist">
					<view v-for="(it,index) in item.childs" :key="index" >
						<check-icon :check="true" :disable='true'></check-icon> 
						<view class=""> {{it.name}} </view>
					</view>
					 
				</view>
			</view>
		</view>
		
		
		<view class="footer">
			<view class="woodsbtn" @click="showsh" 
			style="background-color: #fff;color: #277EEF;border: 1rpx solid #277EEF;">
				申请售后
			</view>
			<view class="woodsbtn" @click="handleSubmit" style="background-color: #277EEF;">
				确认验收
			</view>
		</view>
		<shReasonList title="申请售后" dict="sale_handle" ref="reason" @handleChange="reasonCallback"></shReasonList>
	</view>
</template>

<script>
import {serviceAcceptanceAPI,receiveOrderAPI,aftersaleAPI} from "@/api/order.js"
import  checkIcon from "@/components/checkIcon.vue"
import shReasonList from "./components/shReasonList.vue"
	export default {
		components:{
			checkIcon,shReasonList
		},
		data() {
			return {
				list:[],
				checked:[],
				id:"",
				type: null,
			}
		},
		onLoad(option) {
			this.id=option.id
			this.type = option.type
			this.getData()
		},
		computed:{
 		},
		methods: {
			showsh(){
				// 只有保洁单才需要选择
				if(this.checked.length === 0 && this.type == 1){
					return uni.showToast({
						title:"请选择需售后内容",
						icon:'none'
					})
				}
				this.$refs.reason.visible=true
			} ,
			reasonCallback(cancel){
				if(cancel.length){
					aftersaleAPI({
						orderId:this.id,
						applyReason:cancel.join(","),
						infoDOList:this.checked
						
 					}).then(res=>{
						uni.showToast({
							title:"提交售后"
						})
						let pages = getCurrentPages(); // 当前页面
						let beforePage = pages[pages.length - 2];
						setTimeout(()=>{
							uni.navigateBack({
								success() {
									beforePage.$vm.resetQuery();
								}
							})
						},1000)
					})
				}else{
					uni.showToast({
						 title: "请选择理由", 
						 icon:'none'					
					});	
				}
				
			},
			getData(){
				serviceAcceptanceAPI({id:this.id}).then(res=>{
					this.list=res
					// 收集所有子项的 ID 到 checked 数组中
					             this.checked = this.list.reduce((acc, staff) => {
					                            return [...acc, ...staff.childs.flatMap(serviceParent => serviceParent.childs.map(service => service))];
					                        }, []);
											console.log("11111", this.checked)
				})
			},
			chose(it){
				const index = this.checked.findIndex(item => item.id === it.id);
				if (index === -1) {
					this.checked.push(it);
				} else {
					this.checked.splice(index, 1);
				}
				console.log("22222", this.checked)
				
			},
			handleSubmit(){
				var data={
					orderId:this.id,
					infoDOList:this.checked
				}
				receiveOrderAPI(data).then(res=>{
					uni.showToast({
						title:"确认验收"
					})
					let pages = getCurrentPages(); // 当前页面
					let beforePage = pages[pages.length - 2];
					setTimeout(()=>{
						uni.navigateBack({
							success() {
								beforePage.$vm.resetQuery();
							}
						})
					},1000)
				}) 
			}
		}
	}
</script>

<style lang="scss" scoped>
.pages{
	padding: 30rpx;
	background-color: #F8F8F8;
	min-height: 100vh;
}
.title{
	font-size: 34rpx;
	font-weight: bold;
	 
	margin: 20rpx 0;
}
 
.box{
	background-color: #fff;
	padding: 20rpx;
	margin-bottom: 30rpx;
}
.citylist{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	
	>view{
		border-radius: 10rpx;
		padding: 12rpx 30rpx;
		color: #1D2541;
		font-size: 28rpx;
		display: flex;
		align-items: center; 
		width: 50%;
		view{
			margin-left: 10rpx;
		}
	}
}
.footer{
	padding: 20rpx;
	.woodsbtn{
		margin: 20rpx;
	}
}
</style>
